<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自己封装一个简单的路由</title>
</head>
<body>
	<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/product">产品</a></li>
    <li><a href="#/server">服务</a></li>
	</ul>
	<div id="result"></div>

	<script>
/*
 * hash即URL中"#"字符后面的部分
 *  使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置
 *  hash还有另一个特点，它的改变不会导致页面重新加载
 *  hash值浏览器是不会随请求发送到服务器端的
 *  通过window.location.hash属性获取和设置hash值
 *当URL的片段标识符更改时，将触发hashchange事件
 *hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性
 *
 * init 监听浏览器 url hash 更新事件
 * route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
 * refresh 执行当前url对应的回调函数，更新页面
 */	
		function Router(){
			this.routes = {};
			this.curUrl = "";

			this.route = function(path , callback){
				this.routes[path] = callback || function(){};
			}

			this.refresh = function(){
				this.curUrl = location.hash.slice(1) || '/';  //获取#后面的值，没有则为"/"
				this.routes[this.curUrl]();
			}

			this.init = function(){
				window.addEventListener('load', this.refresh.bind(this), false); 
				//bind(this)让函数this指向Router实例
        window.addEventListener('hashchange', this.refresh.bind(this), false); 
			}
		}

		var R = new Router();
		R.init();
		var res = document.getElementById('result');

		R.route('/', function() { 
	    res.style.background = 'red'; 
	    res.innerHTML = '这是首页'; 
		}); 
		R.route('/product', function() { 
		  res.style.background = 'orange'; 
		  res.innerHTML = '这是产品页'; 
		}); 
		R.route('/server', function() { 
		  res.style.background = 'green'; 
		  res.innerHTML = '这是服务页'; 
		});
	</script>
</body>
</html>